<template>
  <div class="dashboard-container">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="statistics-row">
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card">
          <div class="stat-icon user-icon">
            <el-icon><User /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ statistics.userCount }}</div>
            <div class="stat-label">用户总数</div>
          </div>
        </div>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card">
          <div class="stat-icon order-icon">
            <el-icon><ShoppingCart /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ statistics.orderCount }}</div>
            <div class="stat-label">订单总数</div>
          </div>
        </div>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card">
          <div class="stat-icon revenue-icon">
            <el-icon><Money /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">¥{{ statistics.revenue }}</div>
            <div class="stat-label">总收入</div>
          </div>
        </div>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <div class="stat-card">
          <div class="stat-icon growth-icon">
            <el-icon><TrendCharts /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ statistics.growth }}%</div>
            <div class="stat-label">增长率</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 最新动态 -->
    <el-row :gutter="20" class="activity-row">
      <el-col :xs="24" :lg="12">
        <div class="activity-card">
          <div class="card-header">
            <h3>最新用户</h3>
            <el-button type="primary" size="small" @click="viewAllUsers">
              查看全部
            </el-button>
          </div>
          <div class="activity-list">
            <div
              v-for="user in latestUsers"
              :key="user.id"
              class="activity-item"
            >
              <el-avatar :size="40" :src="user.avatar">
                {{ user.nickname?.charAt(0) || user.username?.charAt(0) }}
              </el-avatar>
              <div class="activity-content">
                <div class="activity-title">{{ user.nickname || user.username }}</div>
                <div class="activity-desc">{{ user.email }}</div>
                <div class="activity-time">{{ formatTime(user.createTime) }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      
      <el-col :xs="24" :lg="12">
        <div class="activity-card">
          <div class="card-header">
            <h3>系统日志</h3>
            <el-button type="primary" size="small" @click="viewAllLogs">
              查看全部
            </el-button>
          </div>
          <div class="activity-list">
            <div
              v-for="log in systemLogs"
              :key="log.id"
              class="activity-item"
            >
              <div class="log-icon" :class="log.level">
                <el-icon>
                  <component :is="getLogIcon(log.level)" />
                </el-icon>
              </div>
              <div class="activity-content">
                <div class="activity-title">{{ log.message }}</div>
                <div class="activity-desc">{{ log.module }}</div>
                <div class="activity-time">{{ formatTime(log.createTime) }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'

const router = useRouter()

// 响应式数据
const statistics = reactive({
  userCount: 1234,
  orderCount: 5678,
  revenue: '123,456',
  growth: 15.6
})

const latestUsers = ref([
  {
    id: 1,
    username: 'user001',
    nickname: '张三',
    email: 'zhangsan@example.com',
    avatar: '',
    createTime: '2024-01-15 10:30:00'
  },
  {
    id: 2,
    username: 'user002',
    nickname: '李四',
    email: 'lisi@example.com',
    avatar: '',
    createTime: '2024-01-15 09:15:00'
  },
  {
    id: 3,
    username: 'user003',
    nickname: '王五',
    email: 'wangwu@example.com',
    avatar: '',
    createTime: '2024-01-15 08:45:00'
  }
])

const systemLogs = ref([
  {
    id: 1,
    level: 'info',
    message: '用户登录成功',
    module: '认证模块',
    createTime: '2024-01-15 10:30:00'
  },
  {
    id: 2,
    level: 'warning',
    message: '数据库连接超时',
    module: '数据库模块',
    createTime: '2024-01-15 10:25:00'
  },
  {
    id: 3,
    level: 'error',
    message: 'API调用失败',
    module: '网关模块',
    createTime: '2024-01-15 10:20:00'
  }
])

// 方法
const formatTime = (time) => {
  return dayjs(time).format('MM-DD HH:mm')
}

const getLogIcon = (level) => {
  const iconMap = {
    info: 'InfoFilled',
    warning: 'WarningFilled',
    error: 'CircleCloseFilled'
  }
  return iconMap[level] || 'InfoFilled'
}

const viewAllUsers = () => {
  router.push('/user/list')
}

const viewAllLogs = () => {
  router.push('/system/log')
}

// 生命周期
onMounted(() => {
  console.log('Dashboard mounted')
})
</script>

<style lang="scss" scoped>
.dashboard-container {
  .statistics-row {
    margin-bottom: 20px;
  }
  
  .stat-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    
    .stat-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      
      .el-icon {
        font-size: 24px;
        color: #fff;
      }
      
      &.user-icon {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }
      
      &.order-icon {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }
      
      &.revenue-icon {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }
      
      &.growth-icon {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }
    }
    
    .stat-content {
      flex: 1;
      
      .stat-number {
        font-size: 24px;
        font-weight: 600;
        color: #333;
        margin-bottom: 4px;
      }
      
      .stat-label {
        font-size: 14px;
        color: #666;
      }
    }
  }
  
  .activity-row {
    margin-bottom: 20px;
  }
  
  .activity-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      
      h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }
    }
    
    .activity-list {
      .activity-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .activity-content {
          flex: 1;
          margin-left: 12px;
          
          .activity-title {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            margin-bottom: 4px;
          }
          
          .activity-desc {
            font-size: 12px;
            color: #666;
            margin-bottom: 4px;
          }
          
          .activity-time {
            font-size: 12px;
            color: #999;
          }
        }
        
        .log-icon {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          
          .el-icon {
            font-size: 18px;
            color: #fff;
          }
          
          &.info {
            background: #409EFF;
          }
          
          &.warning {
            background: #E6A23C;
          }
          
          &.error {
            background: #F56C6C;
          }
        }
      }
    }
  }
}
</style>
